<template>
  <iframe
    :src="iframeRouter"
    width="100%"
    frameborder="0"
    ref="iframeDom"
    class="iframe"
    v-if="foreignID"
  ></iframe>
  <div v-else>题组ID不存在</div>
</template>

<script>
import { location_QuestionBank, debounce, location} from "@/util/tool";
import { mapState } from "vuex";
export default {
  data() {
    return {
      isLoad: false,
      height: 150,
    };
  },
  props: {
    iframeRouter: String,
    foreignID: Number,
    sitem: Object,
    width: String,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    getIframeHeight() {
      return this.$refs.iframeDom?.clientHeight || 0;
    },
    iframeWidth() {
      return this.$refs.iframeDom.contentWindow;
    },
    iframeHeight() {
      return this.$refs.iframeDom;
    },
  },
  watch: {
    getIframeHeight(n) {
    },
  },
  methods: {
    handleClose() {
      this.$emit("handleIframeClose");
    },
    /**
     * @description 监听iframe加载完成
     */
    listenIframeOnload() {
      const that = this;
      const iframe = this.$refs.iframeDom;
      // 处理兼容行问题
      if (iframe.attachEvent) {
        iframe.attachEvent("onload", function (e) {
          that.isLoad = true;
          that.sendData(iframe);
          that.completeLoad = true;
        });
      } else {
        iframe.onload = function (e) {
          that.isLoad = true;
          that.sendData(iframe);
          that.completeLoad = true;
        };
      }
    },
    /**
     * otherWindow.postMessage(message, targetOrigin, [transfer]);
     * https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
     * @description 向iframe发送消息
     */
    sendData(dom) {
      let params = {
        currGuidelineID: this.sitem.guidelineID,
        userInfo: this.userInfo,
        isStudy: false,
        isReview: true,
        taskDetail: { guidelineResults: {} },
        iframeID: +new Date() + "" || "defaultIframeID",
        width: this.width || undefined,
      };
      params.taskDetail.guidelineResults[this.sitem.guidelineID] = {
        session_id: this.sitem.session_id,
      };
      dom.contentWindow.postMessage(
        JSON.stringify(params),
        location_QuestionBank(window)
      );
      // dom.contentWindow.postMessage(
      //   JSON.stringify(params),
      //   "http://localhost:3000/"
      // );
      window.addEventListener(
        "message",
        (event) => {
          // Do we trust the sender of this message?  (might be
          // different from what we originally opened, for example).
          if (event.origin !== location(window) && event.origin !== 'http://localhost:3000') return;
          const data = JSON.parse(event?.data);
          if (data.iframeID == params.iframeID) {
            // let iframeHeight = JSON.parse(event?.data)?.iframeHeight
            // this.height = iframeHeight
          }
          // this.debounce(iframeHeight)
        },
        false
      );
    },
    debounce: debounce(function(e) {
      this.height = e
    },100)
  },
  mounted() {
    if (this.foreignID) this.listenIframeOnload();
  },
};
</script>

<style lang="stylus" scoped>
.iframe {
  max-width: 779px;
  min-height: 150px;
  height: 80vh;
}

.isLoad {
  height: 100%;
}
</style>